<template>
  <uni-nav-bar title="新增商家" left-icon="left" @clickLeft="navBack"  statusBar></uni-nav-bar>
  <view :style="{ display: curPage === 'map' ? 'none' : 'block'}">
    <view class="package">
      <view class="space-between">
        <view>店名</view>
        <input class="uni-input" placeholder="请输入店铺名称" v-model="name" />
      </view>
      <view class="space-between top">
        <view>店长</view>
        <input class="uni-input" placeholder="请输入店长姓名" v-model="realname" />
      </view>
      <view class="space-between top">
        <view>电话</view>
        <input class="uni-input" placeholder="请输入店铺电话" v-model="phone" />
      </view>
      <view class="space-between top">
        <view>营业时间</view>
        <input class="uni-input" placeholder="例如:08:00-24:00" v-model="time" />
      </view>
      <view class="space-between top">
        <view>地址</view>
        <view class="center" @click="chooseLocation" style="justify-content: flex-end;width:80%;">
          <view style="width:80%;text-align: right;margin-right: 15rpx;">{{locName?locName:'请选择店铺位置信息'}}</view>
          <uni-icons type="location-filled" size="23" color="#666"></uni-icons>
        </view>
      </view>
      <view class="top">
        <view>图片</view>
        <mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="1" />
      </view>
    </view>
  </view>
  <view @click="submit()" class="add">确认</view>
  <!-- 选择地址列表 -->
  <view v-if="curPage === 'map'"><web-view :src="mapURI"></web-view></view>
  <!-- 当前位置经纬度 -->
  <Lotlats @position="position"></Lotlats>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import Lotlats from '@c/team/Lotlat.vue';
  import { ref, Ref } from 'vue';
  import { toPublish } from '@mqtt';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  // data
  const curPage : Ref<'form' | 'map'> = ref('form');
  const longitude = ref()
  const latitude = ref()
  const mapURI = ref('');
  const locName = ref('')
  const name = ref()
  const phone = ref()
  const realname = ref()
  const time = ref()

  // 上传图片
  const imgList = ref([])
  const image = ref()
  // 上传图片
  function onChoose(e : any) {
    uni.uploadFile({
      url: 'https://admin.anlan.tech/api/common/upload2',
      filePath: e.tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'  // 上传附带参数
      },
      success: (uploadFileRes) => {
        image.value = JSON.parse(uploadFileRes.data).data.url
        // 根据接口具体返回格式   赋值具体对应url
        imgList.value.push(JSON.parse(uploadFileRes.data).data.fullurl)
      },
      fail: (err : any) => {
        console.log('err', err)
      }
    });
  }
  // 删除图片
  function onDelete() {
    imgList.value = []
  }
  function position(lat : number, lot : number) {
    console.log(longitude.value + '***' + latitude.value)
    longitude.value = lot;
    latitude.value = lat;
  }
  /**
   * 跳转到地址列表 选择位置信息
   */
  function chooseLocation() {
    mapURI.value = `https://apis.map.qq.com/tools/locpicker?coord=${latitude.value},${longitude.value}&search=1&type=1&key=URFBZ-F4TKI-SLPGX-57GMO-ZHYM6-BCFSL&referer=安蓝环保`;
    curPage.value = 'map';
    function msgListener(event : any) {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      var loc = event.data;
      if (loc && loc.module == 'locationPicker') {
        console.log(JSON.stringify(loc) + '*****')
        curPage.value = 'form';
        longitude.value = loc.latlng.lng;
        latitude.value = loc.latlng.lat;
        locName.value = loc.poiname
        //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        window.removeEventListener('message', msgListener);
      }
    }
    window.addEventListener('message', msgListener, false);
  }
  function submit() {
    if (!phone.value) {
      errorToast('请输入店铺联系方式')
      return
    }
    if (!name.value) {
      errorToast('请输入店铺名称')
      return
    }
    if (!locName.value) {
      errorToast('请选择店铺位置')
      return
    }
    if (imgList.value.length < 1) {
      errorToast('请上传店铺图片')
      return
    }
    if (!realname.value) {
      errorToast('请输入店长姓名')
      return
    }
    if (!time.value) {
      errorToast('请输入营业时间')
      return
    }
    add()
  }
  function add() {
    showLoading()
    const payload = {
      phone: phone.value,
      name: name.value,
      image: image.value,
      longitude: longitude.value,
      latitude: latitude.value,
      address: locName.value,
      realname: realname.value,
      time: time.value
    };
    toPublish(
      'control/addStore',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          setTimeout(() => {
            navBack()
          }, 600)
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 60px auto 0px;
    font-size: 32rpx;
  }

  input {
    width: 70%;
    text-align: right;
  }

  .top {
    margin-top: 20rpx;
  }
</style>